<template>
  <div class="icons-container">
    <div class="top-search-box">
      <a-input-search placeholder="请输入图标名称" style="position: relative" @search="filterIcons" />
    </div>
    <a-tabs v-model:activeKey="activeKey" type="card" class="iconSelectTab" @change="handleChange">
      <a-tab-pane v-for="classify of iconList" :key="classify.title" :tab="classify.title">
        <div class="grid">
          <div
            v-for="(item, index) of classify.iconList"
            :key="item"
            :class="{ activeCss: activeVar == index }"
            @click="handleClipboard(item, index)"
          >
            <AvicIcon :svg="item" />
            <span>{{ item }}</span>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane v-if="searchIconList.length > 0" key="queryResult" tab="查询结果">
        <div class="grid">
          <div
            v-for="(item, index) of searchIconList"
            :key="item"
            :class="{ activeCss: activeVar == index }"
            @click="handleClipboard(item, index)"
          >
            <AvicIcon :svg="item" />
            <span>{{ item }}</span>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
import { getIcons } from '@/assets/icon/index';
const { proxy } = getCurrentInstance();
/**
 * 组件回调事件
 * select 选择事件回调
 */
const $emit = defineEmits(['select']);
const props = defineProps({
  copyType: { type: Boolean, default: false }
});
const iconList = ref(getIcons());
const searchIconList = ref([]);
// let oldIconList = proxy.$lodash.cloneDeep(iconList);
// 用户查找图标时定位到第一个找到图标的页签
const activeKey = ref();
const activeVar = ref(-1);

if (iconList.value) {
  activeKey.value = iconList.value[0].title;
}
/** tab切换 */
function handleChange() {
  activeVar.value = -1;
}
// let tabKeyMap = new Map();
/**
 * 拷贝
 * @param {*} symbol 选择的数据
 * @param {*} index 下标
 */
function handleClipboard(symbol, index) {
  activeVar.value = index;
  if (props.copyType) {
    $emit('select', symbol);
  } else {
    // eslint-disable-next-line no-param-reassign
    const text = `<avic-icon svg='${symbol}' />`;
    const oInput = document.createElement('input');
    oInput.value = text;
    document.body.appendChild(oInput);
    oInput.select();
    document.execCommand('Copy');
    oInput.className = 'oInput';
    oInput.style.display = 'none';
    proxy.$message.success(`拷贝成功${text}`);
  }
}
const firstTitle = iconList.value[0].title;
/**
 * 过滤数据
 * @param {*} searchValue 搜索输入的值
 */
function filterIcons(searchValue) {
  searchIconList.value = [];
  if (searchValue) {
    iconList.value.forEach((icons) => {
      const searchList = icons.iconList.filter((item) => {
        if (item) {
          return item.includes(searchValue);
        }
        return false;
      });
      searchIconList.value = [...searchIconList.value, ...searchList];
    });
    if (searchIconList.value.length > 0) {
      activeKey.value = 'queryResult';
    } else {
      activeKey.value = firstTitle;
    }
    /* iconList.value = proxy.$lodash.cloneDeep(oldIconList.value);
  if (searchValue) {
    tabKeyMap = new Map();
    iconList.value.forEach(function (icons) {
      icons.iconList = icons.iconList.filter(item => {
        if (item) {
          if (item.includes(searchValue)) {
            tabKeyMap.set(icons.title, icons.title);
          }
          return item.includes(searchValue);
        }
      },
      );
    }); */
    // 当前页签如果找到符合条件的图标则定位到当前页签，当前页签如果没有则定位到第一个服务条件的页签
    /* let index = 0;
    let queryTabKey = activeKey.value;
    tabKeyMap.forEach((item) => {
      if (index == 0) {
        queryTabKey = item;
      }
      index++;
      if (activeKey.value == item) {
        queryTabKey = item;
        return;
      }
    });
    activeKey.value = queryTabKey; */
  } else {
    activeKey.value = firstTitle;
  }
}
</script>
<style lang="less">
@import './style/AvicIconList.less';
</style>
